<template>
    <div class="exchangeHistory">
        <!-- <assets-head :title="$t('闪兑历史')" :back-func="backFunc" /> -->
        <backHeader :title="$t('闪兑历史')" backPath="/exchange"></backHeader>
        <van-tabs v-model="active">
            <van-tab :title="$t('闪兑')"></van-tab>
        </van-tabs>
        <div class="px-32 mt-70">
            <div class="flex items-center">
                <div class="flex-1">
                    <div class="list-tab flex">
                        <!-- <div class="tab-item flex active items-center justify-center">{{ $t('历史委托') }}</div> -->
                        <!-- <div class="tab-item  flex items-center justify-center">{{ $t('当前委托') }}</div> -->
                    </div>
                </div>
                <!-- <div>
                    <img src="../../assets/image/exchange/icon_7.png" @click="show = true" class="w-24 h-30" />
                </div> -->
            </div>
            <div class="flex justify-between text-grey font-35 my-21">
                <span>{{ $t('从') }}</span>
                <span>{{ $t('至') }}</span>
            </div>
            <van-list v-model="loading" :finished="finished" :finished-text="$t('已经全部加载完毕')" @load="onLoad"
                :loading-text="$t('加载中...')" :offset="130">
                <ul class="flex flex-col">
                    <li v-for="item in list" :key="item.id" class="flex flex-col">
                        <p class="flex justify-between font-35 textColor">
                            <span>{{ item.amount }} {{ item.symbol.toUpperCase() }}</span>
                            <span>{{ item.amount_to.toFixed(5) }} {{ item.symbol_to.toUpperCase() }}</span>
                        </p>
                        <p class="flex justify-between font-30 text-grey mt-19 mb-45">
                            <span>{{ item.create_time }}</span>
                            <span class="flex items-center">
                                <i :class="{
                                    'btnMain': item.state === 'submitted',
                                    'bg-red': item.state === 'canceled',
                                    'bg-green': item.state === 'created',
                                }" class="block  w-16 h-16 mr-10 rounded-full"></i>
                                {{ status[item.state] }}</span>
                        </p>
                    </li>
                </ul>
            </van-list>
        </div>
        <van-popup :style="{ background: '#242424', height: '100%' }" closeable v-model="show" position="right"
            :close-on-click-overlay="false" @close="onClose">
            <div class="px-30 py-30 pop-box">
                <div class="title">{{ $t('筛选') }}</div>
                <div class="text">{{ $t('日期') }}</div>
                <div class="mt-30 flex">
                    <van-field class="input-box" readonly clickable name="datetimePicker" :value="value"
                        :placeholder="$t('开始日期')" @click="showPicker = true" />
                    <van-field class="input-box" readonly clickable name="datetimePicker" :value="value"
                        :placeholder="$t('结束日期')" @click="showPicker = true" />
                </div>
                <div class="text">{{ $t('钱包') }}</div>
                <div class="mt-30 flex">
                    <van-field class="input-box" readonly clickable name="datetimePicker" :value="value"
                        :placeholder="$t('选择钱包')" @click="showSelect = true" />
                </div>
                <div class="text">{{ $t('币种') }}</div>
                <div class="mt-30 flex">
                    <van-field class="input-box" readonly clickable name="datetimePicker" :value="value"
                        :placeholder="$t('选择币种')" @click="showSelect = true" />
                </div>
                <div class="h-100 rounded flex justify-between  box-border items-center mt-50 mb-48 text-white w-full">
                    <p class="w-360 h-80 rounded flex justify-center items-center bgDark" @click="show = false">
                        {{ $t('重置') }}</p>
                    <p class="w-360 h-80 rounded btnMain text-white flex justify-center items-center">
                        {{ $t('搜索') }}</p>
                </div>
            </div>
        </van-popup>
        <van-popup v-model="showPicker" position="bottom">
            <van-datetime-picker type="time" @cancel="showPicker = false" />
        </van-popup>
        <van-action-sheet v-model="showSelect" :actions="actions" />
    </div>
</template>

<script>
import { List, Tab, Tabs, Popup, Field, DatetimePicker, ActionSheet } from 'vant';
import { _exchangeHistory } from '@/API/fund.api';
import assetsHead from "@/components/assets-head";
import backHeader from '@/components/backHeader/index.vue';
export default {
    components: {
        assetsHead,
        [List.name]: List,
        [Tab.name]: Tab,
        [Tabs.name]: Tabs,
        [Popup.name]: Popup,
        [Field.name]: Field,
        [DatetimePicker.name]: DatetimePicker,
        [ActionSheet.name]: ActionSheet,
        backHeader,
    },
    data() {
        return {
            loading: true,
            finished: false,
            pageSize: 10,
            page_no: 1,
            list: [],
            status: {
                submitted: this.$t('已提交'),
                canceled: this.$t('已撤销'),
                created: this.$t('已完成')
            },
            active: 0,
            show: false,
            value: '',
            showPicker: false,
            showSelect: false,
            actions: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }],
        }
    },
    created() {
        this.onLoad()

    },
    methods: {
        backFunc() {
            console.log('backFunc', this.$route.query)
            if (this.$route.query.type / 1 === 1) {
                this.$router.push({
                    path: '/funds',
                    query: {
                        tab: 1
                    }
                })
            } else if (this.$route.query.type / 1 === 0) {
                this.$router.push({
                    path: '/funds',
                    query: {
                        tab: 0
                    }
                })
            } else {
                this.$router.go(-1)
            }
        },
        onLoad() { // 加载数据
            this.loading = true
            _exchangeHistory(this.page_no).then(data => {
                this.page_no = this.page_no + 1
                this.list = [...this.list, ...data]
                this.loading = false
                if (data.length < this.pageSize) {
                    this.finished = true
                } else {
                    this.page_no++
                }
            })
        },
        onClickLeft() {
            this.$router.go(-1);
        },
        onClose() {

        }
    }
}
</script>
<style lang="scss" scoped>
.exchangeHistory {
    width: 100%;
    min-height: 100vh;

    @include themify() {
        background: themed("main_background");
    }

    box-sizing: border-box;

    // ::v-deep .van-nav-bar {
    //     @include themify() {
    //         background: themed("main_background");
    //     }
    // }

    // ::v-deep .van-nav-bar__title {
    //     @include themify() {
    //         color: themed("text_color");
    //     }
    // }

    // ::v-deep .van-tabs__nav {
    //     @include themify() {
    //         background: themed("main_background");
    //     }
    // }

    // ::v-deep .van-tab {
    //     @include themify() {
    //         color: themed("text_color");
    //     }
    // }
}



.list-tab {
    .tab-item {
        width: 180px;
        height: 70px;
        background: #1D2439;
        border-radius: 20px;
        font-size: 26px;
        color: #fff;
        margin-right: 20px;
    }

    .active {
        color: #1194F7 !important;

        @include themify() {
            background: themed("btn_background1");
        }

    }
}



.pop-box {
    .title {
        color: #fff;
        font-size: 34px;
        font-weight: bold;
        margin-top: 10px;
    }

    .text {
        color: #818181;
        margin-top: 30px;

    }
}

.input-box {
    background: #262D47;
    font-size: 28px;
}

.bgDark {
    background: #242424;
}

.btnMain {
    background: linear-gradient(90deg, #2C64D4 0%, #38AEEA 100%);
}

::v-deep .van-cell::after {
    border-bottom: none;
}
</style>
